<template>
  <div>
    <el-autocomplete
      clear="up-input"
      placeholder="请输入代码简称/拼音"
      v-model="mycode"
      :fetch-suggestions="querySearchAsync"
      @select="handleSelect"
      popper-class="my-autocomplete"
      @change="blurhandleSelect"
      :size="size"
      :highlight-first-item="true"
      clearable
    >
      <!--    -->
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
      <template slot-scope="{ item }">
        <div class="list">
          <div class="exchange">{{ item.exchange }}</div>
          <span class="name">{{ item.name }}</span>
          <span class="addr">{{ item.stockcode }}</span>
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
import { search } from "@/api/index.js";
export default {
  props: {
    code: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: ""
    },
    flag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mycode: ""
    };
  },
  methods: {
    async querySearchAsync(queryString, cb) {
      const { data } = await search({ stock: queryString });
      var restaurants = data.list;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      cb(results);
    },
    createStateFilter(queryString) {
      return results => {
        return results;
      };
    },
    seachEnter(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.$emit("getlist", e.stockcode);
        this.mycode = "";
      }
    },
    handleSelect(e) {
      this.mycode = `${e.name}   ${e.stockcode}`;
      this.$emit("getlist", e.stockcode);
      this.$emit("getNameCode", `${e.name} ${e.stockcode}`);
      if (this.flag) {
        this.mycode = "";
      }
    },
    blurhandleSelect(e) {
      if (!e) {
        this.$emit("getlist", "");
      }
    },
    clearInput(e) {
      this.mycode = "";
    }
  }
};
</script>

<style lang="less">
.my-autocomplete {
  .list {
    display: flex;
    justify-content: space-between;
  }
}
</style>